<template>
  <div class="common-query">
    <el-select v-model="planStore.queryInfo.planType"
               @change="planStore.refreshInfo()"
               style="width: 120px;align-self: center;">
      <el-option v-for="(item, index) in planTypeOptions" :key="index"
                 :label="item.label" :value="item.value"/>
    </el-select>

    <el-select v-model="planStore.queryInfo.orderType"
               @change="planStore.refreshInfo()"
               style="width: 120px;align-self: center;">
      <el-option v-for="(item, index) in orderTypeOptions" :key="index"
                 :label="item.label" :value="item.value"/>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { usePlanStore } from '@/store/plan.ts'

const planStore = usePlanStore()

const planTypeOptions = [{
  label: '所有计划',
  value: 'all'
},
{
  label: '已完成计划',
  value: 'completed'
},
{
  label: '未完成计划',
  value: 'notCompleted'
}]

const orderTypeOptions = [{
  label: '按时间排序',
  value: 'date'
},
{
  label: '按重要性排序',
  value: 'priority'
}]
</script>
